var Grid = function(w,h){
	var self = this; 

	this.onClickRow = null;
	this.width=w;
	this.height=h;
	this.comp = null;
	var body = null;
	this.columns = [];
	this.data = null;
	
	create = function(){
		
	};
	
	this.addCol = function(name,field,width){
		var c = {name: name,field:field,width:width};
		this.columns[this.columns.length] = c;
	};
	
	this.setData = function(d){
		this.data = d;
	};
	
	var rowWidth = 0;
	var compData = null;
	var rowsForPage = 0;
	var page = 1;
	
	var lblPagina = $("<label/>");
	var lblTotPagina = $("<label />");
	
	this.bind = function(e){
		this.comp = $("<div class='grid' />");
		body = $("<div class='grid-body' />");
		body.css("width",this.width);
		body.css("height",this.height);
		this.comp.append(body);

		var footer = $("<div class='grid-footer' />");
		this.comp.append(footer);
		
		var btnF = $("<div class='grid-botao-first' onClick='grid.firstPage();'></div>");
		var btnP = $("<div class='grid-botao-previous' onClick='grid.previousPage();'></div>");
		var btnN = $("<div class='grid-botao-next' onClick='grid.nextPage();'></div>");
		var btnL = $("<div class='grid-botao-last' onClick='grid.lastPage();'></div>");
		
		footer.append(btnF);
		footer.append(btnP);
		footer.append(btnN);
		footer.append(btnL);
		
		var divLabels = $("<div class='grid-label'</div>");
		divLabels.append($("<label>Paginas: </label>"));
		divLabels.append(lblPagina);
		divLabels.append($("<label> de: </label>"));
		divLabels.append(lblTotPagina);
		
		footer.append(divLabels);
		
		var innerHeightData = this.height - 40;
		
		rowsForPage = (innerHeightData - (innerHeightData % 20))/20;
		
		var row =  $("<div class='grid-head' />");
		$.each(this.columns,function(index,col){
			var cell =  $("<div />");
			cell.css("width",col.width);
			var span = $("<span />");
			span.css("width",col.width - 10);
			span.text(col.name);
			cell.append(span);
			rowWidth += cell.width()+2;
			row.append(cell);
		});
		row.css("width",rowWidth);
		body.append(row);
		
		compData = $("<div/>");
		
		this.fill();

		body.append(compData);
		
		var elem = null;
		if( e instanceof Object ){
			elem = e;
		}else{
			elem = $(e);
		}
		elem.append(this.comp);
		this.atualizaLabels();
	};

	
	this.clear = function(){
		compData.empty();
	};
	
	this.fill = function(){
		this.clear();
		var regFim = (rowsForPage * page);
		var regIni = regFim - rowsForPage;
		var zebra = 0;
		for(var i=regIni; i < this.data.length && i < regFim; i++  ){
			var row =  $("<div class='grid-row' />");
			if( (zebra % 2) == 0 ){
				row.addClass("grid-zebra");
			}
			var line = this.data[i];
			row.click(line,function(e){
				if( self.onClickRow != null ){
					self.onClickRow(e.data);
				}
			});
			$.each(this.columns,function(index,col){
				var cell =  $("<div />");
				cell.css("width",col.width);
				var span = $("<span />");
				span.css("width",col.width - 10);
				span.text(line[col.field]);
				cell.append(span);
				row.append(cell);
			});
			row.css("width",rowWidth);
			compData.append(row);
			zebra ++;
		}
	};
	
	this.getTotalPages = function(){
		var tot = Math.ceil(this.data.length / rowsForPage);
		return tot;
	};
	
	this.setPage = function(pg){
		if(( pg <= this.getTotalPages() ) && ( pg > 0 )){
			page = pg;
			this.fill();
			this.atualizaLabels();
		}
	};
	
	this.nextPage = function(){
		this.setPage(page + 1);
		
	};
	
	this.previousPage = function(){
		this.setPage(page - 1);
	};

	this.firstPage = function(){
		this.setPage(1);
	};
	
	this.lastPage = function(){
		this.setPage(this.getTotalPages());
	};
	
	this.atualizaLabels = function(){
		lblPagina.text(page);
		lblTotPagina.text(this.getTotalPages());
	};
	
	create();
};